<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: rgb(188, 7, 22);
        }
    </style>
</head>

<body>
    <h1>演示使用模板字符串</h1>
    <ul>

    </ul>
    <script>
        let name = 'twj'
        //拼接字符串，换行并插入单个值(原始方法)
        let oli = "<li>\
            <b>"+ name + "</b>\
            </li>";
        //使用模板字符串
        let oli2 = `<li>
            <b>${name}</b>
            </li>`;
        console.log(oli2);

        function test() {
            return "函数返回结果"
        }

        //插入多个值
        let arr = ['twj', 'wbd', 'xjp'];
        let newList = arr.map(function (item, index) {
            //模板字符串的中可以插入变量、表达式、函数等
            return `<li class="${index === 0 ? 'active' : ''}">
                <b>${item}</b>
                ${test()}
            </li>`
        })
        console.log(newList);

        //将li添加到ul里面
        let oul = document.querySelector("ul");
        oul.innerHTML = newList.join("");
    </script>
</body>

</html>